﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row" id="app">
    <div class="col-xs-12">
        <!--职务-->
        <div class="row" id="keshidiv">
            <div class="col-xs-12">
                <!--搜索-->
                <div class="row">
                    <div class="col-xs-12 col-sm-8">
                        <p>
                            <button class="btn btn-white btn-info btn-bold" v-on:click="P_AddNewPage">
                                <i class="ace-icon glyphicon glyphicon-plus bigger-120 blue"></i>
                                新增职务
                            </button>
                        </p>
                    </div>
                </div>
                <!--职务列表-->
                <div class="row">
                    <div class="col-xs-12">
                        <table id="simple-table" class="table  table-bordered table-hover">
                            <thead>
                                <tr>

                                    <th>职务名称</th>
                                    <th>上级</th>
                                    <th></th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr v-for="(tr,i) in zhiwus">

                                    <td>{{tr.zwmc}}</td>
                                    <td>
                                        <template v-if="tr.PZhiWei">
                                            {{tr.PZhiWei.zwmc}}
                                        </template>
                                        
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle btn-sm " aria-expanded="true">
                                                操作
                                                <i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                            </button>

                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="javascript:void(0)" v-on:click="p_edit(tr)">编辑</a>
                                                </li>

                                                <li>
                                                    <a href="javascript:void(0)" v-on:click="p_Del(tr.zwid,i)">删除</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <!--弹出框-->
        <div class="row">
            <div class="col-xs-12">
                <div id="dialog-message" class="hide">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right"> 职务名称 </label>
                                    <div class="col-sm-9"><input type="text" placeholder="职务名称" class="col-xs-10 col-sm-5" v-model="zhiwu.zwmc" /></div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right"> 上级 </label>
                                    <div class="col-sm-9">
                                        <select class="form-control" v-model="zhiwu.PZhiWei.zwid">
                                            <option v-for="option in selectzhiwus" v-bind:value="option.zwid">{{ option.zwmc }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- #dialog-message -->
            </div>
        </div>
    </div><!-- /.span -->
</div>
<script src="~/Scripts/JsModel/Model_ZhiWu.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            zhiwus: [],
            zhiwu: new Zhiwu(),
            selectzhiwus:[]
        },
        mounted() {
            this.p_GetZhiWuList();
        },
        methods: {
            P_AddNewPage: function (e) {//弹出新增科室窗口
                var _self = this;
                e.preventDefault();
                var dialog = dialog_comm(true,"dialog-message", "新增科室信息", null, function () { _self.P_SaveZhiWu(); },true);
            },
            P_SaveZhiWu() {
                var _self = this;
                $.showloading();
                axios.post('@Url.Action("SaveZhiWu", "ZhiWeiConfig")', _self.zhiwu).then(
                    function (response) {
                        _self.zhiwu = new ZhiWu();
                            _self.p_GetZhiWuList();
                            $.closeloading();
                        },
                        function(response) {
                            //alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            $.closeloading();
                        }
                    );
            },
            p_GetZhiWuList() {
                var _self = this;
                $.showloading();
                axios.post('@Url.Action("GetZhiWuList", "ZhiWeiConfig")').then(
                    function (response) {
                        _self.zhiwus = [];
                        _self.selectzhiwus = [];
                        _self.selectzhiwus.push({ zwid: 0, zwmc: "无上级" });
                        for (var i = 0; i < response.data.length; i++) {
                            _self.zhiwus.push(response.data[i]);
                            _self.selectzhiwus.push(response.data[i]);
                        }
                        $.closeloading();
                        },
                        function(response) {
                            //alert(response.status);
                        }
                    )
                    .catch(
                        function(error) {
                            $.closeloading();
                        }
                    );
            },
            p_Del(zwid, index) {
                var _self = this;
                bootbox.confirm("你确定这个操作吗?",
                    function(result) {
                        if (result) {
                            axios.get("@Url.Action("DelZhiWu", "ZhiWeiConfig")", { params: { zwid: zwid } }).then((response) => {
                                _self.zhiwus.splice(index, 1);
                                },
                                (response) => {

                                }
                            ).catch(function(response) {
                                console.log(response);
                            });
                        }
                    });
            },
            p_edit(obj) {
                var _self = this;
                _self.zhiwu = new Zhiwu(obj);
                var dialog = dialog_comm(true,"dialog-message", "编辑科室信息", null, function () { _self.P_SaveZhiWu(); },true);
            }
        }
    });
</script>